<template>
  <div>
    <MyForm
      :fields="fields"
      :customValidators="customValidators"
      @submit="handleSubmit"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import MyForm from "./MyForm.vue";

export default defineComponent({
  name: "ParentComponent",
  components: {
    MyForm,
  },
  setup() {
    const fields = [
      { name: "username", label: "Username", type: "text" },
      { name: "email", label: "Email", type: "email" },
    ];

    const customValidators = {
      username: [
        (value: string) => !!value || "Username is required",
        (value: string) => value.length > 5 || "Username must be more than 5 characters",
      ],
      email: [
        (value: string) => !!value || "Email is required",
        (value: string) => /.+@.+\..+/.test(value) || "Email is invalid",
      ],
    };

    const handleSubmit = (formData: Record<string, string>) => {
      // console.log("Form submitted with data:", formData);
    };

    return { fields, customValidators, handleSubmit };
  },
});
</script>
